<!--
 * @Author: wangshuguang
 * @Date: 2022-02-18 15:07:02
 * @LastEditTime: 2022-10-27 16:51:15
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="flowIndex">
    <!-- 未开户状态 -->
    <div v-if="accStatus == 1000" class="noInfo loading">
      <img src="../../assets/img/flow/loading.gif" alt="" />
    </div>
    <!-- 集合未开户状态，新增背景 -->
    <div
      class="noOpenAcountBox" 
      v-else-if="[1001,1002,1003].includes(accStatus)" >
      <div class="noOpenAcountBoxBg"
      :style="`background-image: url(${openAccountInfo.openPictureUrl})`">
        <div class="noInfo">
          <van-button v-if="accStatus == 1001" class="subBtn" type="primary" size="large" @click="openAccount" >去开户</van-button>
          <van-button v-else-if="accStatus == 1002" class="subBtn audit" type="primary" size="large" disabled>开户中...</van-button>
          <van-button v-else-if="accStatus == 1003" class="subBtn" type="primary" size="large" @click="openAccount" >开户失败，重新开户</van-button>
          <van-button
            class="inviteBtn"
            type="default"
            size="large"
            @click="handleSuperInvited"
          >
            <span class="text" :class="{ 'text-poit': superMemberPoit }"
              >超级会员被邀请记录</span
            >
          </van-button>
        </div>
      </div>
    </div>
    <!-- 已开户 -->
    <div v-else class="homeInfo">
      <!-- 标题 提醒信息 -->
      <div class="homeHead">
        <div class="title">享惠生活</div>
        <div class="warnInfo" v-show="remindInfo">
          <div>
            <img src="../../assets/img/flow/tip.png" alt="" />
            {{ remindInfo }}
          </div>
          <div class="toPay" @click="$router.push('recharge')">去充值</div>
        </div>
      </div>
      <!-- 看板 -->
      <div class="board">
        <div class="head leftLine">
          <span class="title">看板</span>

          <div class="date" @click="datePicker = true">
            {{ nowDate.text }}
            <img src="../../assets/img/flow/downArrow.png" alt="" />
          </div>
        </div>
        <van-loading size="24px" vertical v-show="pageLoading"
          >加载中...</van-loading
        >
        <div class="boardList">
          <div
            class="boardItem"
            v-for="boardItem of boardList"
            :key="boardItem.icon"
          >
            <div class="boardItemHead">
              <div class="left">
                <img :src="boardItem.img" alt="" class="titleIcon" />
                {{ boardItem.title }}
                <!-- <img class="quesImg" v-show="boardItem.tip" @click="showTip(boardItem.tip)" src="../../assets/img/flow/ques.png" alt=""> -->
              </div>
              <img
                class="right"
                @click="boardItem.clickFun"
                v-if="boardItem.clickFun"
                src="../../assets/img/flow/rightArrow.png"
                alt=""
              />
            </div>
            <div class="boardItemContent">
              <span class="num">{{ boardItem.key1 }}</span>
              <span
                class="rate"
                :class="boardItem.key2 >= 0 ? 'rise' : 'lower'"
                v-show="(boardItem.key2 || boardItem.key2 == 0) && boardItem.key2 !== 'null'"
              >
                {{ boardItem.key2 }}%
                <img
                  v-if="boardItem.key2 >= 0"
                  src="../../assets/img/flow/rise.png"
                  alt=""
                />
                <img v-else src="../../assets/img/flow/lower.png" alt="" />
              </span>
            </div>
            <div class="boardItemContent" v-if="boardItem.key3">
              <span class="num">{{ boardItem.key3 }}</span>
              <span
                class="rate"
                :class="boardItem.key4 >= 0 ? 'rise' : 'lower'"
                v-show="(boardItem.key4 || boardItem.key4 == 0) && boardItem.key4 !== 'null'"
              >
                {{ boardItem.key4 }}%
                <img
                  v-if="boardItem.key4 >= 0"
                  src="../../assets/img/flow/rise.png"
                  alt=""
                />
                <img v-else src="../../assets/img/flow/lower.png" alt="" />
              </span>
            </div>
            <div class="boardItemContent" v-if="boardItem.key5">
              <span class="num">{{ boardItem.key5 }}</span>
              <span
                class="rate"
                :class="boardItem.key6 >= 0 ? 'rise' : 'lower'"
                v-show="(boardItem.key6 || boardItem.key6 == 0) && boardItem.key6 !== 'null'"
              >
                {{ boardItem.key6 }}%
                <img
                  v-if="boardItem.key6 >= 0"
                  src="../../assets/img/flow/rise.png"
                  alt=""
                />
                <img v-else src="../../assets/img/flow/lower.png" alt="" />
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 功能中心 -->
      <div class="funContent">
        <div class="head leftLine">
          <span class="title">功能中心</span>
        </div>
        <div class="menuList">
          <!-- <div class="menuItem" @click="handleMenu('tghy')">
            <img src="../../assets/img/flow/tghy.png" alt="">
            <span>推广会员</span>
          </div> -->
          <div class="menuItem" @click="handleMenu('smhx')">
            <img src="../../assets/img/flow/smhx_icon.png" alt="">
            <span>扫码核销</span>
          </div>
          <div class="menuItem" @click="handleMenu('smfk')">
            <img src="../../assets/img/flow/smsk_icon.png" alt="">
            <span>扫码收款</span>
          </div>
          <div class="menuItem" @click="handleMenu('ztbd')">
            <img src="../../assets/img/flow/smhx.png" alt="" />
            <span>桌台绑定</span>
          </div>
        </div>
      </div>


      <div class="superMemberCon">
        <div class="head leftLine">
          <span class="title">超级会员</span>
        </div>
        <div class="menuList">

          <div class="menuItem" @click="handleMenu('invitee')">
            <img src="../../assets/img/flow/sp-invitee.png" alt="" />
            <span :class="{ 'poit-tips': isInviterRedDot }">邀请者</span>
          </div>

<!--          <div class="menuItem" @click="handleMenu('invitee')">-->
<!--            <van-badge :dot="isInviterRedDot">-->
<!--              <div class="menuItem">-->
<!--                <img src="../../assets/img/flow/sp-invitee.png" alt="" />-->
<!--                <span> 邀请者</span>-->
<!--              </div>-->
<!--            </van-badge>-->
<!--          </div>-->

          <div class="menuItem" @click="handleMenu('cjhy-cyz')">
            <img src="../../assets/img/flow/sp-member_join.png" alt="" />
            <span :class="{ 'poit-tips': superMemberPoit }">参与者</span>
          </div>


          <div class="menuItem" @click="handleMenu('activity')">
            <img src="../../assets/img/flow/sp-activity.png" alt="" />
            <span :class="{ 'poit-tips': isActivityRedDot }">活动</span>
          </div>

<!--          <div class="menuItem">-->
<!--            <van-badge :dot="isActivityRedDot">-->
<!--              <div class="menuItem" @click="handleMenu('activity')">-->
<!--                <img src="../../assets/img/flow/sp-activity.png" alt="" />-->
<!--                <span>活动</span>-->
<!--              </div>-->
<!--            </van-badge>-->
<!--          </div>-->

        </div>
      </div>
      <!-- 插件中心 -->
      <div class="plugContent">
        <div class="head leftLine">
          <span class="title">插件中心</span>
        </div>
        <div class="menuList">
          <!-- <div class="menuItem" @click="handleMenu('mjmz')">
            <img src="../../assets/img/flow/mjmz.png" alt="">
            <span>满减满折</span>
          </div>
          <div class="menuItem" @click="handleMenu('flfg')">
            <img src="../../assets/img/flow/flfg.png" alt="">
            <span>返利复购</span>
          </div>
          <div class="menuItem" @click="handleMenu('aicz')">
            <img src="../../assets/img/flow/aicz.png" alt="">
            <span>AI储值</span>
          </div> -->
          <div class="menuItem" @click="handleMenu('jzyx')">
            <img src="../../assets/img/flow/jzyx.png" alt="">
            <span>精准营销</span>
          </div>
          <div class="menuItem" @click="handleMenu('zdybd')">
            <img src="../../assets/img/flow/zdybd.png">
            <span>自定义表单</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择时间 -->
    <van-popup v-model="datePicker" round position="bottom">
      <van-picker
        title="选择时间"
        show-toolbar
        :columns="dateColumn"
        @cancel="datePicker = false"
        @confirm="moneyConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  enjoyRemind,
  checkMercAccStatus,
  enjoyBoardShow,
  engoyFavourLogin,
  flowAlert,
  queryInvitedStatus,
  getInviterRedDot,
  querySuperMemberStatus,
  getBusinessDetail,
  getActivityRedDot,
  getExportTable
} from "@/api/flow/index";
import { queryOpenEnjoyAllInfo } from "@/api/flow/openAcount";
import { pluginCenterAlert } from "@/api/plug";
import { mapGetters } from "vuex";
import { Dialog } from "vant";
import { debounce } from "lodash-es";
export default {
  data() {
    return {
      pageLoading: true,
      isInviterRedDot: false,
      isActivityRedDot: false,
      statusText: "",
      remindInfo: "",
      nowDate: {
        value: "",
        text: "今天"
      },
      datePicker: false,
      dateColumn: [
        { text: "今天", value: "" },
        { text: "昨天", value: "yesterday" },
        { text: "近7天", value: "week" },
        { text: "近30天", value: "thirty" },
        { text: "本月", value: "month" }
      ],
      openAccountInfo: {},
      boardList: [],
      superMemberPoit: false // 超级会员提示
    };
  },
  mounted(){
    console.log('flowQueryData',this.flowQueryData)
    console.log('process.env', process.env)
    let merchantId = ''
    let cloudToken = ''
    if(this.$route.query && this.$route.query.merchantId){
      // 如果url中含有基础信息 存储query信息
      merchantId = this.$route.query.merchantId;
      cloudToken = this.$route.query.appToken;
      this.$store.commit("setFlowQueryData", this.$route.query);
    } else if (this.flowQueryData.merchantId) {
      merchantId = this.flowQueryData.merchantId;
      cloudToken = this.flowQueryData.appToken;
    }
    engoyFavourLogin({ merchantId, cloudToken }).then(res => {
      console.log("res", res);
      const { code, data, msg } = res.data;
      // 获取token
      if (code == 0) {
        localStorage.setItem("fuhuibatoken", data.token);
        this.checkStatus(merchantId);
        this.getPoitStatus(merchantId);
        //获取邀请者和活动的红点
        getInviterRedDot({
          merchantId: this.flowQueryData.merchantId
        }).then(data => {
          const { data: data2 } = data;
          const { code: code2, msg: msg2, data: res2 } = data2;
          if (code2 === 0 && msg2 === "success") {
            this.isInviterRedDot = res2?.exitedRedDot;
          }
        });
        getActivityRedDot({
          merchantId: this.flowQueryData.merchantId
        }).then(res => {
          const { data } = res;
          const { code, msg, data: res2 } = data;
          if (code === 0 && msg === "success") {
            this.isActivityRedDot = res2;
          }
        });
      } else {
        this.$toast(msg);
      }
    });
  },
  computed: {
    ...mapGetters([
      "flowQueryData",
      "showFlowAlert",
      "accStatus",
      "keepLiveArr"
    ])
  },
  methods: {
    showTip(text) {
      Dialog.alert({ message: text });
    },
    checkStatus(merchantId) {
      // 校验是否开户
      checkMercAccStatus({ merchantId }).then(res => {
        // code:  0 已开户 1000 查询中 1001 未开户 1002 开户中 1003 开户失败
        const { code, msg } = res.data;
        // const { code, msg } = { code: 1003, msg: 123 }
        this.$store.commit("setAccStatus", code);
        this.statusText = msg;
        if (code == 0) {
          this.fetchBaseApi(merchantId);
          this.getData();
        }else{
          this.getOpenAcountInfo()
        }
      });
    },
    getOpenAcountInfo(){
      const { deptId } = this.flowQueryData
      queryOpenEnjoyAllInfo({deptId}).then(res => {
        this.openAccountInfo = res.data.data
      })
    },
    fetchBaseApi(merchantId) {
      // 插件流量剩余情况
      enjoyRemind({
        merchantId
      }).then(res => {
        console.log("res", res);
        const { remindInfo, remindFlag } = res.data.data;
        if (remindFlag) {
          this.remindInfo = remindInfo;
        }
      });
      // 预警弹框是否弹出
      flowAlert({ merchantId }).then(res => {
        const { alertFlag, alertNotice } = res.data.data;
        if (alertFlag == 1 && this.showFlowAlert == 0) {
          this.$store.commit("setFlowAlert", 1);
          Dialog.confirm({
            confirmButtonText: "去充值",
            cancelButtonText: "我知道了",
            confirmButtonColor: "#FFB72F",
            message: alertNotice
          }).then(res => {
            this.$router.push("recharge");
          });
        }
      });
    },
    async getData() {
      this.pageLoading = true;
      // 看板基础信息
      const { merchantId } = this.flowQueryData;
      await enjoyBoardShow({
        merchantId,
        dateType: this.nowDate.value
      }).then(res => {
        this.pageLoading = false;
        const { data } = res.data;
        this.boardList = [
          {
            title: "会员开卡",
            icon: "card",
            img: require("../../assets/img/flow/card.png"),
            key1: data["vipOpenPersonNum"] + "人",
            key2: data["vipOpenPersonRatio"],
            key3: data["vipOpenAmount"] + "元",
            key4: data["vipOpenAmountRatio"],
            clickFun: () => {
              this.$router.push("memberCreCard");
            }
          },
          {
            title: "会员储值",
            icon: "storage",
            img: require("../../assets/img/flow/storage.png"),
            key1: data["vipSaveAmount"] + "元",
            key2: data["vipSaveAmountRatio"],
            key3: data["vipSaveNumNum"] + "笔",
            key4: data["vipSaveNumRatio"],
            tip: "会员储值包含储值开卡金额",
            clickFun: () => {
              this.$router.push("memberSharedList");
            }
          },
          {
            title: "套餐消耗",
            icon: "flow",
            img: require("../../assets/img/flow/flow.png"),
            key1: data["pkgConsumeNum"],
            key2: data["pkgConsumeNumSymRatio"],
            clickFun: () => {
              console.log("this", this);
              this.$router.push("myFlow");
            }
          },

        ]
      })
      await getExportTable({dateType: this.nowDate.value}).then(result=>{
        let {data} = result
        if(data.code == 0){
          this.boardList.push({
            title: '核销报表',
            icon: 'flow2',
            img: require('../../assets/img/flow/hx_icon.png'),
            key1: `${data.data.writeOffTotal}笔`,
            key2: `${data.data.writeOffTotalRatio}`,
            key3: `${data.data.countTotal}次`,
            key4: `${data.data.countTotalRatio}`,
            key5: `${data.data.amountTotal/100}元`,
            key6: `${data.data.amountTotalRatio}`,
            clickFun:() => {
              let {keepLiveArr} = this
              if (keepLiveArr.indexOf("cancelStatement") == -1) {
                keepLiveArr.push("cancelStatement");
                this.$store.commit("setKeepLive", keepLiveArr);
              }
              this.$router.push('cancelStatement')
            }
          },)
        }
      })
    },
    moneyConfirm(item) {
      console.log("item", item);
      this.nowDate = item;
      this.datePicker = false;
      this.getData();
    },
    openAccount() {
      this.$router.push("openAccount");
      // this.$router.push('deskBind')
    },
    async handleMenu(key) {
      switch (key) {
        case "cjhy-cyz":
          this.$router.push({
            path: "/surperInvitors",
            query: { merchantId: this.$route.query.merchantId }
          });
          break;
        case 'cjhy-yqz':
          // 超级会员邀请者跳转预留
          break;
        case 'jzyx': {
          // 查询精准营销开通状态
          let statusArr = {
            1: { btnText: '立即开通', path: '/openPlug'},
            2: { btnText: '立即续费', path: '/plugRenew'},
            3: { btnText: '复制地址', path: ''},
          }
          pluginCenterAlert({code: 'rfm'}).then(res => {
            console.log('res',res)
            const { alertInfo,alertStatus } = res.data.data
            let statusObj = statusArr[alertStatus]
            this.$dialog.confirm({
              title: '提示',
              message: alertInfo,
              confirmButtonText: statusObj['btnText']
            }).then(() => {
              // 已开通
              if(alertStatus == 3){
                let rfmUrl = process.env.VUE_APP_MERC_PC + '/#/vip/group'
                this.$copyText(rfmUrl).then(res => {
                  this.$toast('复制成功')
                })
              }else{
                this.$router.push({
                  path: statusObj['path'],
                  query:{
                    pluginCode: 'rfm'
                  }
                })
              }
            });
          })
          break;
        }
        // case 'tghy':
        //   this.$router.push('shareMem')
        //   break;
        case "ztbd":
          this.$router.push("deskBind");
          break;
        case "invitee":
          this.handleJudgeCanIntoInvitee();
          break;
        case "activity":
          this.handleJudgeCanIntoActivity();
          break;
           case 'smhx':
            this.chargeOff()
            break;
             case 'smfk':
            this.chargeOff(1)
            break;
        case "zdybd":
          const result = await this.searchPluginStatusByCode({code:'customerform'})
          console.log('调用自定义表单',result)
          const { alertInfo,alertStatus } = result.data.data
          const status= Number(alertStatus)
          if( status === 1 || status ===2 ){
              const PlugInStatus = {
                1: "未开通",
                2: "欠费停用",
              };
              const tips = status === 1 ? "开通" : "续费";
              Dialog.confirm({
                message: `当前${PlugInStatus[status]}自定义表单插件，请${tips}后才可操作`,
                title: "提示",
                confirmButtonColor:'#ffb72f',
                confirmButtonText: `立即${tips}`
              }).then(() => {
                //立即开通/续费的操作
                const path = status === 1 ? "/openPlug" : "/plugRenew";
                this.$router.push({
                  path: path,
                  query: {
                    pluginCode: "customerform"
                  }
                });
              });

          }else{
            await this.$router.push('cusForm')
          }
          break;
        default:
          this.$toast("敬请期待");
          break;
      }
    },
    async searchPluginStatusByCode(code){
      return await pluginCenterAlert(code)
    },
    handleJudgeCanIntoInvitee() {
      const PlugInStatus = {
        0: "未开通",
        1: "已开通",
        2: "欠费停用"
      };

      const res = getBusinessDetail({
        merchantId: this.flowQueryData.merchantId
      }).then(res => {
        const {
          code,
          data: { email }
        } = res.data;
        if (code === 0) {
          if (!email) {
            // 点开通后，需要查询接口商户邮箱是否设置，设置了立即开通，未设置提示
            Dialog({
              message: "商户邮箱未设置，请在商户后台补充邮箱后操作",
              confirmButtonColor:'#ffb72f',
              title: "提示"
            });
          } else {
            querySuperMemberStatus({
              merchantId: this.flowQueryData.merchantId
            }).then(res => {
              const {
                code,
                msg,
                data: { status }
              } = res.data;
              if (code === 0) {
                // 开通状态 0:未开通 1:已开通 2:欠费停用
                if (status !== 1) {
                  const text = status === 0 ? "未开通" : "欠费停用";
                  const tips = status === 0 ? "开通" : "续费";
                  Dialog.confirm({
                    message: `当前${PlugInStatus[status]}超级会员插件，请${tips}后才可操作`,
                    title: "提示",
                    confirmButtonColor:'#ffb72f',
                    confirmButtonText: `立即${tips}`
                  }).then(() => {
                    //立即开通/续费的操作
                    const path = status === 0 ? "/openPlug" : "/plugRenew";
                    this.$router.push({
                      path: path,
                      query: {
                        pluginCode: "supermember"
                      }
                    });
                  });
                } else {
                  this.$router.push({
                    path: "/invitee"
                  });
                }
              }
            });
          }
        }
      });
    },
    handleJudgeCanIntoActivity() {
      this.$router.push({
        path: "/surperActivity"
      });
    },
    handleSuperInvited: debounce(function() {
      this.$router.push({
        path: "/surperInvitors",
        query: { merchantId: this.$route.query.merchantId }
      });
    }, 250),
    getPoitStatus(merchantId) {
      queryInvitedStatus({ merchantId }).then(res => {
        const { code, data } = res.data;
        if (code === 0 && data) {
          this.superMemberPoit = data.inviteRecordRedDot || false;
        }
      });
    },
    chargeOff(status){
      var u = navigator.userAgent;
      console.log(status)
      let type = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1?'isAndroid':!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)?'isiOS':''
      if(type == 'isAndroid'){
        status?injectedObject.CodeScanPay():injectedObject.CodeScanVerify()
        // injectedObject.CodeScanVerify();
      }else{
        function setupWebViewJavascriptBridge(callback) {
          if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
          }
          if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
          }
          window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
          var WVJBIframe = document.createElement("iframe"); // 创建一个 iframe 元素
          WVJBIframe.style.display = "none"; // 不显示
          WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__"; // 设置 iframe 的 src 属性
          document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
          setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe);
          }, 0);
        }
        // 这里主要是注册 OC 将要调用的 JS 方法。
        setupWebViewJavascriptBridge(function (bridge) {
          bridge.callHandler(
            `${ status?'CodeScanPay':'CodeScanVerify'}`,
            // "CodeScanVerify",
            { data: `${ status?'CodeScanPay':'CodeScanVerify'}` },
            // { data: "CodeScanVerify" },
            function (dataFromOC) {
              console.log(dataFromOC, "dataFromOC--");
              document.getElementById("returnValue").value = dataFromOC;
            }
          );
          bridge.registerHandler(
            "iosSendSNCode",
            function (data, responseCallback) {
              // 回调app
              console.log(data, "message--");
              that.setDeskCode(data);
              //   this.snCode = data
              //   that.formData.equipmentSN = data;
              //   that.$refs.form.validate();
              responseCallback(responseData);
            }
          );
        });
      }
    },
  },
  destroyed() {
    this.$store.commit("setSateType", this.nowDate.value);
  }
};
</script>

<style lang="less" scoped>
.leftLine {
  border-left: 6px solid #ffb72f;
  padding-left: 15px;
}
.flowIndex {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .noOpenAcountBox{
    flex: 1;
    height: 100%;
    .noOpenAcountBoxBg{
      min-height: 1334px;
      height: 100%;
      position: relative;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 50% 0;
      background-color: #fff3dc;
    }
  }
  .noInfo {
    position: absolute;
    bottom: 5%;
    text-align: center;
    &.loading {
      width: 100px;
      img {
        width: 100%;
      }
    }
    img {
      width: 304px;
    }
    .content {
      font-size: 28px;
      margin: 26px 0 90px;
    }
    .subBtn {
      border-color: #ffb72f;
      background: #ffb72f;
      width: 600px;
      border-radius: 40px;
      height: 80px;
      &.audit{
        background: #d7d7d7;
        border-color: #d7d7d7;
      }
    }
    .inviteBtn {
      box-sizing: border-box;
      background: transparent;
      width: 600px;
      border-radius: 40px;
      height: 80px;
      margin-top: 40px;
      font-size: 32px;
      border: 2px solid #ffb72f;
      .text {
        color: #ffb72f;
      }
      .text-poit::after {
        display: inline-block;
        content: "";
        position: absolute;
        top: 18px;
        width: 12px;
        height: 12px;
        background: #ff0000;
        border-radius: 50%;
      }
    }
  }
  .homeInfo {
    height: 100%;
    overflow: auto;
    width: 100%;
    background: #F9F9F9;
    padding-bottom: 50px;
    .homeHead{
      margin-bottom: 54px;
      .title {
        height: 110px;
        line-height: 110px;
        padding: 0 30px;
        color: #fff;
        font-size: 32px;
        // background: url('../../assets/img/flow/indexBg.png') no-repeat 100% 100%;
        background: #ffb72f;
      }
      .warnInfo {
        background: #ececec;
        border-radius: 0 0 10px 10px;
        font-size: 26px;
        display: flex;
        justify-content: space-between;
        padding: 20px 30px;
        .toPay {
          width: 122px;
          height: 40px;
          background: #ffb72f;
          border-radius: 20px;
          color: #fff;
          text-align: center;
          font-size: 26px;
          padding: 2px 0;
        }
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .board {
      padding: 0 32px;
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        .title {
          font-size: 32px;
          color: #131313;
        }
        .date {
          color: #ffb72f;
          font-size: 26px;
          img {
            width: 30px;
          }
        }
      }
      .boardList {
        display: flex;
        flex-wrap: wrap;
        .boardItem {
          width: 47%;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.1);
          border-radius: 15px;
          justify-content: space-between;
          margin: 10px;
          padding: 30px;
          font-size: 28px;
          .boardItemHead {
            margin-bottom: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              display: flex;
              align-items: center;
              .quesImg {
                width: 36px;
                margin-left: 5px;
              }
              .titleIcon {
                width: 30px;
                margin-right: 5px;
              }
            }
            .right {
              width: 20px;
              padding: 5px 0 5px 20px;
              box-sizing: content-box;
            }
          }
          .boardItemContent {
            display: flex;
            justify-content: space-between;
            .num {
              font-size: 32px;
              color: #131313;
            }
            .rate {
              img {
                width: 13px;
              }
              &.rise {
                color: #cd1414;
              }
              &.lower {
                color: #1ac41e;
              }
            }
          }
        }
      }
    }
    .funContent {
      padding: 0 32px;
      .head {
        font-size: 32px;
        color: #131313;
        margin: 33px 0;
      }
      .menuList {
        display: flex;
        .menuItem {
          font-size: 26px;
          color: #131313;
          display: flex;
          flex-direction: column;
          align-items: center;
          &:not(:first-child) {
            margin-left: 115px;
          }
          span{
            display: inline-block;
            min-width: 110px;
            text-align: center;
          }
          img{
            width: 70px;
          }
        }
      }
    }
    .plugContent {
      padding: 0 32px;
      .head {
        font-size: 32px;
        color: #131313;
        margin: 33px 0;
      }
      .menuList {
        display: flex;
        .menuItem {
          font-size: 26px;
          color: #131313;
          display: flex;
          flex-direction: column;
          align-items: center;
          &:not(:first-child) {
            margin-left: 87px;
          }
          img {
            width: 70px;
          }
          .poit-tips {
            position: relative;
            &::after {
              display: inline-block;
              content: "";
              position: absolute;
              top: -64px;
              right: 6px;
              width: 12px;
              height: 12px;
              background: #ff0000;
              border-radius: 50%;
              z-index: 1;
            }
          }
        }
      }
    }
    .superMemberCon {
      padding: 0 32px;
      margin-top: 80px;
      .head {
        font-size: 32px;
        color: #131313;
        margin: 33px 0;
      }
      .menuList {
        display: flex;
        .menuItem {
          font-size: 26px;
          color: #131313;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 104px;
          &:not(:first-child) {
            margin-left: 15.333333vw
          }
          img {
            width: 70px;
          }
          .poit-tips {
            position: relative;
            &::after {
              display: inline-block;
              content: "";
              position: absolute;
              top: -64px;
              right: 6px;
              width: 12px;
              height: 12px;
              background: #ff0000;
              border-radius: 50%;
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
</style>
